<template>
  <div class="home-wrapper">
    <!-- banner -->
    <section class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item>
          <van-image
            width="100%"
            height="100%"
            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/218297/23/6310/83089/61a7188fE30e33573/b6a72099a9211139.jpg!cr_1053x420_4_0!q70.jpg.dpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="100%"
            height="100%"
            src="http://snsall.oss-cn-qingdao.aliyuncs.com/92E21DE17C0CE872/default/76540/297adf04-ca93-42cf-b4e2-f343bab82de8.png?x-oss-process=image/resize,m_fixed,h_420,w_750"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="100%"
            height="100%"
            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/218297/23/6310/83089/61a7188fE30e33573/b6a72099a9211139.jpg!cr_1053x420_4_0!q70.jpg.dpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="100%"
            height="100%"
            src="http://snsall.oss-cn-qingdao.aliyuncs.com/92E21DE17C0CE872/default/76540/297adf04-ca93-42cf-b4e2-f343bab82de8.png?x-oss-process=image/resize,m_fixed,h_420,w_750"
          />
        </van-swipe-item>
        <template #indicator="{ active }">
          <div class="custom-indicator">{{ active + 1 }}/4</div>
        </template>
      </van-swipe>
    </section>
    <!-- goods -->
    <section class="goods">
      <van-tabs v-model:active="active" swipeable class="customer-tabs" sticky offset-top="210">
        <van-tab
          v-for="(item, index) in tabsList"
          :title="`${item.name}`"
          :key="index"
        >
          <!-- empty -->
          <van-empty description="没有更多..." v-if="item.lists.length == 0" />
          <!-- list  -->
          <van-pull-refresh
            v-if="item.lists.length > 0"
            v-model="refreshing"
            @refresh="onRefresh"
          >
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-card
                :num="item.num"
                :price="item.price"
                :desc="item.desc"
                :title="item.title"
                :thumb="item.thumb"
                v-for="item in list"
                :key="item.num"
                @click="handleGoToDetail(item)"
              >
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
                <template #footer>
                  <van-button size="mini">加入购物车</van-button>
                </template>
              </van-card>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </section>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const active = ref(0);
    const tabsList = reactive([
      {
        name: "商品列表",
        lists: [
          {
            name: "你好",
          },
        ],
      },
      {
        name: "促销活动",
        lists: [],
      },
    ]);
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push({
            num: "2",
            price: "2",
            desc: "描述信息",
            title: "商品标题",
            thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          });
        }
        loading.value = false;

        if (list.value.length >= 20) {
          finished.value = true;
        }
      }, 1000);
    };
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

    const handleGoToDetail = (item) => {
      router.push({ path: "goodsDetail", query: { goodsId: "123" } });
    };

    return {
      active,
      tabsList,
      list,
      loading,
      finished,
      refreshing,
      onLoad,
      onRefresh,
      handleGoToDetail,
    };
  },
});
</script>
<style lang="scss" scoped>
.home-wrapper {
  height: 100vh;
  padding-bottom: 50px;
}
.banner {
  height: 210px;
}
.goods {
  height: calc(100% - 210px);
  overflow-y: auto;
}
.customer-tabs /deep/ .van-tabs__line {
  background: #1989fa;
  .van-tabs__content{

  }
}
</style>
